<template>
    <ul>
        <li class="cartitem">
            <div class="btn">
                <CheckButton v-on:click.native="changeChecked" v-bind:isChecked="$store.state.cartList[this.index].isChecked"/>
            </div>
            <div class="l">
                <img v-bind:src="item.image" alt="图片">
            </div>
            <div class="r">
                <div class="tit">{{item.title}}</div>
                <div class="intro">{{item.desc}}</div>
                <div class="count">
                    <div class="price">{{item.price}}</div>
                    <div class="sum">{{item.count}}</div>
                </div>
            </div>
        </li>
    </ul>
</template>
<script>
import CheckButton from "@/components/content/checkButton/CheckButton";
export default {
    name: "CartListItem",
    data(){
        return{
        }
    },
    props:{
        item:{
            type:Object,
            default:function (){
                return{}
            }
        },
        index:{
            type:Number
        }
    },
    components:{
        CheckButton
    },
    methods:{
        changeChecked(){
           this.$store.state.cartList[this.index].isChecked=!this.$store.state.cartList[this.index].isChecked
        }
    }
}
</script>
<style scoped>
.cartitem{
    display: flex;
    height: 120px;
    padding-top: 10px;
}
.btn{
    width: 7%;
    height: 100%;
    margin-top: 40px;
    margin-left: 5px;
}
.l{
    width: 25%;
    text-align: center;
}
.l img{
    padding-top: 5px;
    max-width: 100%;
    max-height: 100px;
}
.r{
    width: 68%;
    padding: 0 10px;
}
.tit,.intro{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.count{
    display: flex;
}
.price{
    width: 90%;
}
.sum{
    text-align: right;
    width: 10%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
